<template>
	<w-container :loading="loading">
		<w-navbar :placeholder="false">
			<template #left>
				<w-icon @click.native="backPage()" name="nav-arrow-left" size="32"></w-icon>
			</template>
		</w-navbar>
		<view class="today-box" >
			<u-status-bar></u-status-bar>
			<view class="image-box">
				<w-image :src="firstInfo.goods_cover_image" width="100%" height="250"></w-image>
			</view>
			<view class="mt-32">
				<view class="flex flex-js-center flex-ai-center">
					<w-image src='/static/bg/today-title.png' mode="widthFix" width="237"></w-image>
				</view>
			</view>
			<view class="mt-25 flex flex-js-sa flex-ai-end" style="gap: 8rpx;">
				<view v-if="secondInfo.goods_id" class="flex flex-dir-col flex-ai-center">
					<w-image src="/static/icon/today-yajun.png" width="28" height="21"></w-image>
					<view class="yajun-content">
						<view class="per-img-box flex flex-ai-center flex-js-center">
							<w-image :src="secondInfo.goods_cover_image"  :width="235/2" :height="220/2" radius="13"></w-image>
						</view>
						<view class="yajun-text-content font-color-white plr-10 pt-16">
							<view class="font-size-14 font-w-bold text-overflow-2">{{ secondInfo.goods_name }}</view>
							<view class="font-w-500 font-size-10 mt-12" style="color: #D8D8D8;">发行{{ secondInfo.total_num }}/流通{{ secondInfo.flux }}</view>
							<view class="flex flex-ai-center flex-js-sb mt-8">
								<view class="bold">
									<text style="font-size: 18rpx;">￥</text>
									<text class="font-size-13">{{ secondInfo.min_price }}</text>
								</view>
								<view @click="targetLike(secondInfo)">
									<u-icon v-if="secondInfo.is_like" name="star-fill" color="#ea1f15" size="17"></u-icon>
									<u-icon name="star" color="#999999" size="17" v-else></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="firstInfo.goods_id" class="flex flex-dir-col flex-ai-center">
					<w-image src="/static/icon/today-guajun.png" width="28" height="21"></w-image>
					<view class="guanjun-content">
						<view class="per-img-box flex flex-ai-center flex-js-center">
							<w-image :src="firstInfo.goods_cover_image"  :width="235/2" :height="220/2" radius="13"></w-image>
						</view>
						<view class="yajun-text-content font-color-white plr-10 pt-16">
							<view class="font-size-14 font-w-bold text-overflow-2">{{ firstInfo.goods_name }}</view>
							<view class="font-w-500 font-size-10 mt-12" style="color: #D8D8D8;">发行{{ firstInfo.total_num }}/流通{{ firstInfo.flux }}</view>
							<view class="flex flex-ai-center flex-js-sb mt-8">
								<view class="bold">
									<text style="font-size: 18rpx;">￥</text>
									<text class="font-size-13">{{ firstInfo.min_price }}</text>
								</view>
								<view @click="targetLike(firstInfo)">
									<u-icon v-if="firstInfo.is_like" name="star-fill" color="#ea1f15" size="17"></u-icon>
									<u-icon name="star" color="#999999" size="17" v-else></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="thirdInfo.goods_id" class="flex flex-dir-col flex-ai-center">
					<w-image src="/static/icon/today-jijun.png" width="28" height="21"></w-image>
					<view class="jijun-content">
						<view class="per-img-box flex flex-ai-center flex-js-center">
							<w-image :src="thirdInfo.goods_cover_image"  :width="235/2" :height="220/2" radius="13"></w-image>
						</view>
						<view class="yajun-text-content font-color-white plr-10 pt-16">
							<view class="font-size-14 font-w-bold text-overflow-2">{{ thirdInfo.goods_name }}</view>
							<view class="font-w-500 font-size-10 mt-12" style="color: #D8D8D8;">发行{{ thirdInfo.total_num }}/流通{{ thirdInfo.flux }}</view>
							<view class="flex flex-ai-center flex-js-sb mt-8">
								<view class="bold">
									<text style="font-size: 18rpx;">￥</text>
									<text class="font-size-13">{{ thirdInfo.min_price }}</text>
								</view>
								<view @click="targetLike(thirdInfo)">
									<u-icon v-if="thirdInfo.is_like" name="star-fill" color="#ea1f15" size="17"></u-icon>
									<u-icon name="star" color="#999999" size="17" v-else></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-dir-col list-box plr-16 ptb-15">
				<view v-for="(item,index) in elseList" :key="index" class="item-box flex flex-ai-center flex-js-sb mb-20">
					<view class="flex flex-ai-center flex-2">
						<view class="number-box"><text v-if="index < 10">0</text>{{ index + 4 }}</view>
						<w-image class="photo-box ml-10" :src="item.goods_cover_image" :width="55" :height="55" radius="10"></w-image>
						<view class="flex flex-dir-col ml-10 font-color-white">
							<view class="font-size-16 blod text-overflow">{{ item.goods_name }}</view>
							<view class="font-size-10 blod mt-8">发行{{ item.total_num }}/流通{{ item.flux }}</view>
						</view>
					</view>
					<view class="flex flex-ai-center flex-1 flex-js-end">
						<view @click="targetLike(item)">
							<u-icon v-if="item.is_like" name="star-fill" color="#ea1f15" size="17"></u-icon>
							<u-icon name="star" color="#999999" size="17" v-else></u-icon>
						</view>
						<view class="bold font-color-white ml-10">
							<text style="font-size: 18rpx;">￥</text>
							<text class="font-size-13">{{ item.min_price }}</text>
						</view>
					</view>
				</view>
				<w-loading v-if="!list.length" type="empty" emptyType="search"></w-loading>
			</view>
		</view>
	</w-container>
</template>

<script> 
	import { today_hot_rank } from "@/api/user"
	import { isCollect } from '@/api/collection/index.js'
	export default {
		data() {
			return {
				list: [],
				loading:true
			}
		},
		onLoad() {
			this.getTodayList()
		},
		computed: {
			firstInfo(){
				return this.list[0] || {}
			},
			secondInfo(){
				return this.list[1] || {}
			},
			thirdInfo(){
				return this.list[2] || {}			
			},
			elseList(){
				return this.list.slice(3) || []
			}
		},
		methods: {
			async getTodayList(){
				try {
					let res = await today_hot_rank()
					this.list = res.data
				} catch (e) {
					//TODO handle the exception
				} finally {
					this.loading = false
				}
			},
			//切换收藏状态
			targetLike(item) {
				if (!this.isLogin) {
					return 
				}
				let type = item.is_like == 0 ? 1 : 0
				isCollect(item.is_like, {
					types: 2,
					id: item.goods_id
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					item.is_like = type;
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #444444;
	}
</style>
<style lang="scss" scoped>
	.today-box{
		width: 100%;
		height: 100%;
		.image-box {
			width: 100%;
			filter: blur(10px);
			position: absolute;
			top: 0;
			left: 0;
			transition: all .3s; 
		}
		.yajun-content {
			width: 243rpx;
			background-image: url($IMG_URL + '/static/bg/yajun-bg.png');
			background-size: 100% 100%;
			background-position: bottom;
			background-repeat: no-repeat;
			background-color: #444444;
			border-radius: 24rpx 24rpx 0 0;
			.per-img-box {
				width: 100%;
				height: 230rpx;
				background-image: url($IMG_URL + '/static/bg/yajinborder.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				
			}
			.yajun-text-content {
				width: 100%;
				height: 230rpx;
				background: linear-gradient( 90deg, rgba(89,89,89,0.1) 0%, rgba(160,169,181,0.3) 100%);
			}
		}
		.guanjun-content {
			width: 243rpx;
			background-image: url($IMG_URL + '/static/bg/guanjun-bg.png');
			background-size: 100% 100%;
			background-position: bottom;
			background-repeat: no-repeat;
			background-color: #444444;
			border-radius: 24rpx 24rpx 0 0;
			.per-img-box {
				width: 100%;
				height: 230rpx;
				background-image: url($IMG_URL + '/static/bg/guanjunborder.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.yajun-text-content {
				width: 100%;
				height: 260rpx;
				background: linear-gradient( 90deg, rgba(89,89,89,0.1) 0%, rgba(160,169,181,0.3) 100%);
			}
		}
		.jijun-content {
			width: 243rpx;
			background-image: url($IMG_URL + '/static/bg/jijun-bg.png');
			background-size: 100% 100%;
			background-position: bottom;
			background-repeat: no-repeat;
			background-color: #444444;
			border-radius: 24rpx 24rpx 0 0;
			.per-img-box {
				width: 100%;
				height: 230rpx;
				background-image: url($IMG_URL + '/static/bg/jujunjunborder.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.yajun-text-content {
				width: 100%;
				height: 200rpx;
				background: linear-gradient( 90deg, rgba(89,89,89,0.1) 0%, rgba(160,169,181,0.3) 100%);
			}
		}
		.item-box {
			.number-box {
				width: 60rpx;
				font-family: Source Han Sans CN VF, Source Han Sans CN VF;
				font-weight: bold;
				font-size: 32rpx;
				color: #9F9F9F;
				text-align: center;
			}
			.photo-box {
				width: 116rpx;
				height: 116rpx;
				border-radius: 12px 12px 12px 12px;
				border: 5rpx solid #868789;
			}
		}
	}
</style>	
